<template>
    <div>
      <h2>党建地点</h2>
      <el-row :gutter="20">  <!-- 确保这里的 `gutter` 是一个数字 -->
        <el-col v-for="location in locations" :key="location.id" :span="8">
          <el-card class="location-card" :body-style="{ padding: '20px' }">
            <img :src="location.photo" class="location-photo" alt="Location Photo" />
            <h3>{{ location.name }}</h3>
            <p>{{ location.content }}</p>
            <el-button type="primary">{{ location.number }} 预约</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    locations: {
      type: Array,
      required: true
    }
  });
  </script>
  
  <style scoped>
  .location-card {
    margin-bottom: 20px; /* 卡片之间的间距 */
  }
  .location-photo {
    width: 100%;
    height: auto; /* 确保照片适应容器 */
    border-radius: 5px; /* 照片圆角 */
  }
  </style>
  